<template>
  <Container class="statics-edit">
    <div class="container-header title title-center" slot="header">
      {{info.name}}
      <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <div class="tc pt">统计时间：{{info.statisDate}}</div>
    <div class="bg-light">
      <div class="container-title">基本信息</div>
      <Form :label-width="120">
        <Row class="pr">
          <Col span="8">
            <FormItem label="促销类型：">
              <span>{{info.type | filterType}}</span>
            </FormItem>
            <FormItem label="活动开始：">
              <span>{{info.startDate}}</span>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="促销状态：">
              <span>{{info.status}}</span>
            </FormItem>
            <FormItem label="活动结束：">
              <span>{{info.endDate}}</span>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="促销规则：">
              <span>{{info.rule}}</span>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="bg-light">
      <div class="container-title">活动概览</div>
      <div class="total">
        <div class="item">
          <CountUp :end="total.orderNum"></CountUp>
          <p class="big">下单量</p>
        </div>
        <div class="item">
          <CountUp :end="total.orderAmount" :decimals="2"></CountUp>
          <p class="big">下单金额</p>
        </div>
        <div class="item">
          <CountUp :end="total.productNum"></CountUp>
          <p class="big">下单商品数</p>
        </div>
        <div class="item" v-if="info.type !== 'FULL_COUPON'">
          <CountUp :end="total.discountAmount" :decimals="2"></CountUp>
          <p class="big">优惠总金额</p>
        </div>
        <div class="item">
          <CountUp :end="total.userNum"></CountUp>
          <p class="big">优惠使用用户数</p>
        </div>
      </div>
    </div>
    <!-- 统计 -->
    <div class="bg-light">
      <div class="container-title">转化分析</div>
      <IEcharts :options="list.line" auto-resize></IEcharts>
    </div>
    <Loader :status="list.status" @refresh="getData"></Loader>
  </Container>
</template>
<script>
import { formatCurrency, formatDate } from '@/util';
import CountUp from 'vue-countup-v2';
import IEcharts from '~/ECharts';
import staticsData from './staticSaleData'
export default {
  components: {
    CountUp,
    IEcharts
  },
  data () {
    return {
      id: this.$route.query.id || '',
      info: {
        name: '', // 活动标题
        date: '', //活动时间
        startDate: '', //开始时间
        endDate: '', // 结束时间
        type: '', // 促销类型
        status: '', // 促销状态
        rule: '', // 促销规则
        statisDate: '' //统计时间
      },
      total: {
        orderNum: 0, // 下单量
        orderAmount: 0, // 下单金额
        productNum: 0, // 下单商品数
        discountAmount: 0, // 优惠总金额
        userNum: 0 // 用户数
      },
      list: staticsData
    }
  },
  mounted ()  {
    // this.initLine();
    if (this.id) this.getData()
  },
  methods: {
    getData() {
      this.list.status = 'loading'
      this.$ajaxGet(`/activity/activity_data_analysis/${this.id}`).then(data => {
        let info = data.activityInfo
        let total = data.activityStatistics
        let lineAmount= data.amountItemList || []
        let lineQuantity = data.quantityItemList
        this.info.name = info.activityName // 活动标题
        this.info.date = info.promotionTimeDescription //活动时间
        this.info.startDate = formatDate(info.startDate, true) //开始时间
        this.info.endDate = formatDate(info.endDate, true) // 结束时间
        this.info.type = info.activityTypeEnum // 促销类型
        this.info.rule = info.promotionRuleDescription // 促销规则
        let statisDate = '';
        let nowDate = new Date();
        if (this.compareDate(nowDate, info.endDate)) {

          statisDate = info.startDate + '  至  ' + formatDate(nowDate, true);
        } else {
          statisDate = info.startDate + '  至  ' + info.endDate;
        }
        this.info.statisDate = statisDate //统计时间
        let text = ''
          // 先判断审核状态，如果是未审核或者驳回，促销状态显示“未审核”"驳回"， 按钮不显示“暂停”按钮，其他都有
          // 如果是已审核，再去判断是否暂停，如果是，促销状态显示“已暂停” ，按钮暂停变成 “取消暂停”，其他都有
          // 如果是非暂停，则去判断时间，如果当前时间在开始时间之前，促销状态显示“未开始”
          // 如果当前时间在开始和结束时间中间，促销状态显示“进行中”, 按钮都有
          // 如果当前时间在结束时间后面，促销状态显示“已结束”，按钮没有暂停
          switch (info.checkStatusEnum) {
            case 'UNCHECKED':
              text = '未审核'
              break;
            case 'REJECT':
              text = '已驳回'
              break;
            case 'PASS':
              switch (info.isPause) {
                case true:
                  text = '已暂停'
                  break;
                case false:
                  let now = new Date()
                  let isEarly = this.compareDate(now, info.startDate)
                  let isLater = this.compareDate(now, info.endDate)
                  if (isEarly) {
                    text = '未开始'
                  } else if (!isEarly && isLater) {
                    text = '进行中'
                  } else if (!isEarly) {
                    text = '已结束'
                  }
                  break;
              }
              break;
          }
        this.info.status = text
        if (total) {
          this.total.orderNum = total.totalOrderQuantity ? Number(total.totalOrderQuantity) : 0 // 下单量
          this.total.orderAmount = total.totalAmount ? total.totalAmount : 0 // 下单金额
          this.total.productNum = total.totalOrderSkuQuantity ? total.totalOrderSkuQuantity : 0 // 下单商品数
          this.total.discountAmount = total.totalDiscount ? total.totalDiscount : 0 // 优惠总金额
          this.total.userNum = total.totalStoreCount ? Number(total.totalStoreCount) : 0 // 用户数
        }
        let name = lineAmount.map(item => item.orderDate)
        let skuNum = lineQuantity.map(item => item.totalOrderSkuQuantity)
        let orderNum = lineQuantity.map(item => item.totalOrderQuantity)
        let orderAmount = lineAmount.map(item => item.totalAmount)
        this.list.line.xAxis.data = name
        this.list.line.series[0].data = skuNum
        this.list.line.series[1].data = orderNum
        this.list.line.series[2].data = orderAmount
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    compareDate(value1, value2) {
      let date1 = new Date(value1).getTime()
      let date2 = new Date(value2).getTime()
      return (date1 < date2)
    },
    initLine () {
        // 基于准备好的dom，初始化echarts实例
        let $this = this
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
    }
    },
    filters: {
      filterType (val) {
        let list = {
          'SINGLE': '单品',
          'GIFT': '赠品',
          'FULL_CUT': '满减',
          'FULL_GIFT': '满赠',
          'FULL_CUT_GIFT': '满减送',
          'BUY_MORE': '多买优惠',
          'SUIT': '套装',
          'FULL_COUPON': '满额返券',
          'FACTORY_ACTIVITY': '工厂促销'
        }
        return list[val];
      }
    }
}
</script>

